.home{
	// .progress-container {
	// 	width: 100px;
	// 	height: 100px;
	// }
	.mycircle{
		stroke-dasharray: 0  1000;
		// stroke: url(#orange_red);   /*  描边运用渐变色 */
		stroke: $primary;
		fill:none;
		stroke-width: 20px;
		// stroke-linecap: round;
		transition: stroke-dasharray 1s ease-in;
	}
	.txt{
		text-anchor: middle;
		/* 文本水平居中 */
		dominant-baseline: middle;
		/* 文本垂直居中 */
		font-size: 60px;
		// font-family: PingFang SC Arial;
		font-weight: bold;
	}
	.txt.txt2{
		font-size: 28px;
	}
	.table-wrap{
		padding: 20px;
		margin: 20px 0;
		min-height: 150px;
		border-top: 0;
		border-left: 0;
		border-radius: 20px;
		background-color: $f;
		.home-img{
			width: 80px;
			vertical-align: middle;
			cursor: pointer;
			cursor: hand;
		}
		.row-1 {
			margin: 10px auto;
			width: 90%;
			align-items: stretch;
			.img-wrap{
				min-height: 76px;
				line-height: 76px;
			}
			.terminal {
				text-align: center;
			}
			.wifi {
				.wifi-item{
					border-bottom: 1px solid #999;
				}
				.wifi-none {
					color: gray;
				}
			}
			.ios-vertical-middle{
				justify-content: center;  // this just for ios topology graphy bug
			}
			.connect{
				flex: 0 0 20%;   // flex- grown shrink basis
				// height: 20%;
				border-bottom: 1px solid #999;
				position: relative;
			}
			.icon-pc{
				position: absolute;
				bottom: -18px;
				left: 50%;
				margin-left: -18px;
				width: 26px;
				height: 26px;
				padding: 5px;
				box-sizing: content-box;
				font-size: 26px;
				vertical-align: bottom;
				background-color: $f;
			}
			// 信号为4G 时单独的样式定位
			.iconxinhao{
				background-color: #fff;
				color: #0af;
				bottom: -8px;
				padding-left: 2px;
			}
			.iconwuxian{
				background-color: #fff;
				color: #0af;
				bottom: -8px;
				padding-left: 2px;
			}
			.icon-netstatus {
				height: 100%;
				background-position: center;
				background-size: cover;
			}
			.icon-pc-on{
				background-image: url(../../assets/images/online.png);
				
			}
			.icon-pc-off{
				background-image: url(../../assets/images/offline.png);
			}    
			.icon-pc-wireless {
				background-image: url(../../assets/images/wireless.png);
			}
			.icon-pc-4g {
				background-image: url(../../assets/images/4G.png);
			}
		}
		.row-2 {
			margin: 10px auto;
			width: 90%;
			align-items: stretch;
			.port-wrap{
				padding: 6px 8px;			
			}
			.home-btn{
				font-size: 18px;
				font-weight:bold;
				color: #212731;
				line-height:20px;
			}
		}
	}
	
	.main-content{
		overflow: hidden;
		position: relative;
		.info-wrap{
			overflow: hidden;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.box-common {
				background-color: #fff;
				box-shadow:0px 10px 24px 6px rgba(33,39,49,0.02);
				border-radius:20px;
			}
			.info-box{
				flex: 0 0 48%;
				height: 280px;
				overflow: hidden;
				margin: 15px 0;
				font-size: 12px;
				.header{
					// text-indent: 10px;
					padding-left: 30px;
					color: $f;
					background: $bg;
					height: 30px;
					line-height: 30px;
					font-size: 12px;
					font-weight: bold;
				}
			}
			.device-status{
				.info-main{
					padding-top: 10px;
					flex-wrap: wrap;
					.info-item{ 
						flex: 0 0 50%;
						padding: 10px 0;
						display: flex;
						flex-direction: column;
						align-items: center;
						&:nth-child(3){
							.device-value{
								font-size: 16px;
							}
						}
						.device-value{
							font-size: 26px;
							font-weight: bold;
							height: 32px;
							line-height: 32px;
						}
						.label{
							font-size: 14px;
							color: $text-gray;
							// font-weight: bold;
							height: 20px;
							line-height: 20px;
						}
					}
				}
			}
			.api-status{
				.header {
					padding-left: 0;
				}
				.list-wrap{
					min-height: 43px;
					&:nth-of-type(even){
						background-color: #fafafa;
					}
				}
				.item-left-header{
					width: 30%;
					padding-left: 30px;
					// text-indent: 10px;
					// padding-left: 10px;
				}
				.item-left{
					width: 30%;
					// text-indent: 10px;
					padding-left: 30px;
				}
				.item-center{
					width: 40%;
				}
				.item-right {
					width: 30%;
				}
			}
			.wifi-status{
				// 第4个盒子的样式
				.label-4-header{
					width: 120px;
				}
				.label-4{
					width: 150px;
					padding-left: 30px;
				}
				.value-4{
					flex: 1;
					text-align: center;
				}
				// .value-4:nth-child(2n+1) {
				// 	margin-left: 10px;
				// }
				.list-wrap-4{
					min-height: 36px;
					&:nth-of-type(odd){
						background-color: #fafafa;
					}
				}
			}
		}
	}
}
.flex-20{
	flex: 0 0 20%;
}
.flex-average{
	flex: 1;
}
.flex-3{
	flex: 3;
}
#line-chart{
	height: 250px;
}
@media screen and (max-width: 800px) {
	.home {
		.table-wrap{
			.home-img{
				width: 30px;
			}
		}
		.main-content{
			width: 100%;
			.info-wrap .info-box {
				flex: 1 1 90%;
			}
		}
	}
	.main-padding {
		padding: 0 10px;
	}
	.row-2{
		.flex-average{
			display: none;
		}
	}
	.icon-pc {
		width: 16px !important;
		height: 16px !important;
		bottom: -12px !important;
		margin-left: -12px !important;
		padding: 3px !important;
	}
}